<template>
  <div>
    <div v-if="this.$route.name == 'zymanage'" class="app-container">
      <vue-element-loading
        :active="this.$store.state.elementloading.vueElementLoading"
        spinner="spinner"
        color="#FF6700"
      />
      <el-card shadow="never">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="searchMap"
          style="margin-top: 20px;margin-left: 0px"
        >
          <el-form-item prop="mName">
            <el-input @keyup.enter.native="searchMedicinal" v-model.lazy="searchMap.mName">
              <template slot="prepend">药材名称</template>
            </el-input>
          </el-form-item>
          <el-button @click="searchMedicinal" icon="el-icon-search"></el-button>
        </el-form>

        <el-row>
          <el-col>
            <el-button-group style="margin-bottom:20px">
              <el-button v-if="btnshow('zymanage-add')" @click="openNew" size="small" type="primary" icon="el-icon-plus"></el-button>
              <el-button v-if="btnshow('zymanage-update')" @click="handleEdit(radio)" size="small" type="primary" icon="el-icon-edit"></el-button>
              <el-button
                v-if="btnshow('zymanage-delete')"
                @click="handleDelete(radio)"
                size="small"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </el-button-group>
          </el-col>
          <el-col>
            <el-dropdown :hide-on-click="false" trigger="click">
              <el-button size="small" icon="el-icon-s-grid">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-checkbox-group v-model="checkboxVal">
                  <el-dropdown-item>
                    <el-checkbox label="mLatinName">药材拉丁名</el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="mOriginName">基源名称</el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="mOriginLatinName">基源拉丁名</el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="mMethod">药用部位</el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="mOriginInterview">基源简介</el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="mRemarks">药材简介</el-checkbox>
                  </el-dropdown-item>
                </el-checkbox-group>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>

        <template>
          <el-table
            :key="key"
            :data="list"
            max-height="500"
            border
            stripe
            style="width: 100%"
            @row-click="chooseone"
            @row-dblclick="openDetails"
            highlight-current-row
            @current-change="handleSelectionChange"
          >
            <el-table-column fixed width="55">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row.id">
                  <span class="el-radio__label"></span>
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="mName" label="药材名称" width="80"></el-table-column>
            <el-table-column v-for="item in formThead" :key="item" :label="test[item]">
              <template slot-scope="scope">{{ scope.row[item] }}</template>
            </el-table-column>
            <!-- <el-table-column prop="mLatinName" label="药材拉丁名"></el-table-column>
        <el-table-column prop="mOriginName" label="基源名称" width="80"></el-table-column>
        <el-table-column align="center" prop="mOriginLatinName" label="基源拉丁名"></el-table-column>
        <el-table-column prop="mMethod" label="药用部位" width="100"></el-table-column>
        <el-table-column prop="mOriginInterview" label="基源简介"></el-table-column>
            <el-table-column prop="mRemarks" label="药材简介"></el-table-column>-->
            <el-table-column align="center" prop="mPriceLink" label="价格查看" width="95">
              <template slot-scope="scope">
                <el-button
                  @click="showprice(list[scope.$index].mPriceLink)"
                  type="primary"
                  size="mini"
                >查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="mCreateTime" label="创建时间" width="100"></el-table-column>
          </el-table>
        </template>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>

        <!-- 编辑中药材信息弹窗 -->
        <el-dialog
          :close-on-click-modal="false"
          :before-close="handleDialogClose"
          v-dialogDrag
          :title="title"
          :visible.sync="editdataDialog"
          width="40%"
        >
          <add-new
            ref="feditForm"
            @fselect="searchBymName"
            @close="closeEditor"
            :isEdit="isEdit"
            :addnewData.sync="fpojo"
          ></add-new>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeEditor">取 消</el-button>
            <el-button @close="closeEditor" type="primary" @click="addData">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
    <router-view/>
  </div>
</template>

<script src="./zymanage.js"></script>

<style lang="css" src="./zymanage.css" scoped></style>

<style lang="css" >
.el-dialog {
  max-height: calc(100% - 200px);
  /* max-height: 600px; */
  display: flex;
  flex-direction: column;
}
.el-dialog__body {
  overflow: auto;
}
</style>